<!-- 任务查询 -->
<div class="search">
  <nz-select style="width:100px;" [(ngModel)]="status" nzAllowClear nzPlaceHolder="用户状态" (ngModelChange)="searchData()">
    <nz-option *ngFor="let item of statuslist" [nzValue]="item.key" [nzLabel]="item.value"></nz-option>
  </nz-select>
  <nz-select style="width: 120px;" [(ngModel)]="role" nzAllowClear nzPlaceHolder="角色名称" (ngModelChange)="searchData()">
    <nz-option *ngFor="let item of roleItems" [nzValue]="item._id" [nzLabel]="item.name"></nz-option>
  </nz-select>
  <nz-input-group nzSuffixIcon="anticon anticon-search" style="width:50%;margin-left:1rem;">
    <input type="text" nz-input placeholder="输入用户名、登录账号查询" [(ngModel)]="name" (keyup.enter)="searchData()">
  </nz-input-group>
  <a (click)="searchData()">查询</a>
  <a (click)="add()">新增</a>
</div>

<nz-table #ajaxTable nzShowSizeChanger [nzFrontPagination]="false" [nzData]="dataSet" [nzLoading]="loading" [nzTotal]="total"
  [nzShowTotal]="totalTemplate" [(nzPageIndex)]="pageIndex" [(nzPageSize)]="pageSize" (nzPageIndexChange)="searchData()"
  (nzPageSizeChange)="searchData(true)" [nzScroll]="{ x:'900px',y: '600px' }">
  <thead>
    <tr>
      <th nzWidth="60px" nzLeft="0px">序号</th>
      <th nzWidth="200px">用户姓名</th>
      <th nzWidth="150px">所在城市</th>
      <th nzWidth="100px">角色</th>
      <th nzWidth="120px">手机号码</th>
      <!-- <th nzWidth="150px">关联小程序用户</th> -->
      <th nzWidth="120px">更新时间</th>
      <th nzWidth="120px" nzRight="0px">操作</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of ajaxTable.data;index as i">
      <td nzLeft="0px">{{i+1}}</td>
      <td>{{data.name}}</td>
      <td>{{data.area}}</td>
      <td>{{data.rolename}}</td>
      <td>{{data.phone}}</td>
      <!-- <td>{{data.relatephone}}</td> -->
      <td>{{data.updateTime | date:"yyyy/MM/dd HH:mm"}}</td>
      <td nzRight="0px">
        <a (click)="edit(data._id)">修改</a>
        <a *ngIf="data.status=='有效'" (click)="lock(data._id)">禁用</a>
        <a *ngIf="data.status!='有效'" (click)="open(data._id)">启用</a>
      </td>
    </tr>
  </tbody>
</nz-table>

<ng-template #totalTemplate let-total>
  共 {{total}} 条
</ng-template>
<nz-modal [(nzVisible)]="isVisible" nzTitle="用户信息" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" nzWrapClassName="vertical-center-modal"
  [nzMaskClosable]="false" nzWidth="800">
  <div style="margin-bottom: 16px;">
    <nz-input-group nzAddOnBefore="用户名">
      <input type="text" nz-input [(ngModel)]="doc.name">
    </nz-input-group>
    <nz-input-group nzAddOnBefore="角色">
      <nz-select style="width: 100%;" nzPlaceHolder="请选择角色" [(ngModel)]="doc.roleId" (ngModelChange)="checkrole()">
        <nz-option *ngFor="let item of roleItems" [nzLabel]="item.name" [nzValue]="item._id">
        </nz-option>
      </nz-select>
    </nz-input-group>
    <nz-input-group nzAddOnBefore="手机号码">
      <input type="text" nz-input [(ngModel)]="doc.phone" (ngModelChange)="getpassword()">
    </nz-input-group>
    <nz-input-group nzAddOnBefore="关联小程序用户手机号" *ngIf="isshow">
      <input type="text" nz-input [(ngModel)]="doc.relatephone" [disabled]="doc.relatephone && doc.relatephone.length==11">
    </nz-input-group>
    <nz-input-group nzAddOnBefore="所在城市">
      <nz-cascader nzChangeOnSelect [(ngModel)]="areas"[nzLabelProperty]="'lable'"
      [nzValueProperty]="'value'" [nzOptions]="nzOptions" (ngModelChange)="onChanges($event)"> </nz-cascader>
    </nz-input-group>
    <nz-input-group nzAddOnBefore="城市级别">
      <nz-select style="width: 100%;" nzPlaceHolder="请选择城市级别" [(ngModel)]="doc.citytype">
        <nz-option *ngFor="let item of cityItems" [nzLabel]="item.lable" [nzValue]="item.value">
        </nz-option>
      </nz-select>
    </nz-input-group>
    <nz-input-group nzAddOnBefore="登录账号">
        <input type="text" nz-input [(ngModel)]="doc.phone" disabled="true">
      </nz-input-group>
    <nz-input-group nzAddOnBefore="登录密码">
      <input type="text" nz-input [(ngModel)]="doc.password">
    </nz-input-group>
  </div>
  </nz-modal>
